<template>
<div class="homeBox">

  <div class="navTab">
    <el-menu
      :default-active="activeIndex"
      router
      class="el-menu-demo"
      mode="horizontal"
      >
      <el-sub-menu v-for="item of navList" :key="item.path" :index="item.path">
        <template #title>{{item.firstNavName}}</template>
        <el-menu-item v-for="secondItme of item.children" :key="secondItme.path" :index="secondItme.path">{{secondItme.secondNavName}}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>

  <router-view></router-view>

</div>
</template>

<script setup>
import { ref,reactive } from "vue"
import { useRouter } from "vue-router"
import { NAV_DATA } from '@/common/constant/navData.js'

  const router = useRouter()

  let navList = reactive(NAV_DATA)
  console.log(navList)

  const activeIndex = ref(router.currentRoute.value.path)
  // const activeIndex = ref('/toolbox/')

</script>

<style lang='less' scoped>
.homeBox{
  
}
</style>
